<template>
    <nav class="nav-container">
        <!-- 小方框容器，排列为两行，上面五个，下面四个 -->
        <div class="small-squares-container">
            <div
                v-for="(item, index) in navItems"
                :key="item.id"
                class="nav-item small-square"
            >
                <router-link :to="item.link" class="small-square-content">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.description }}</p>
                </router-link>
            </div>
        </div>
    </nav>
</template>

<script>
export default {
    props: {
        navItems: {
            type: Array,
            required: true,
            default: () => [
                { id: 1, name: '问医生', description: '三甲主治在线', link: '/sections' },
                { id: 2, name: '查疾病', description: '权威疾病百科', link: '/disease' },
                { id: 3, name: '查药品', description: '药品信息大全', link: '/medicine' },
                { id: 4, name: '查医院', description: '国内医院信息查询', link: '/hospital' },
                { id: 5, name: '查检查/手术', description: '检查与手术专业百科', link: '/examination' },
                { id: 6, name: '查疫苗', description: '疫苗接种与禁忌', link: '/vaccine' },
                { id: 7, name: '急救指南', description: '急救知识百科查询', link: '/emergency' },
                { id: 8, name: '测一测', description: '1分钟了解自己', link: '/test' },
                { id: 9, name: '科普视频', description: '生活解惑与科普', link: '/videos' },
                
            ]
        }
    }
};
</script>

<style scoped>
/* 总体布局 */
.nav-container {
    display: flex;
    justify-content: center;
    padding: 30px 0;
    
}

/* 小方框容器 */
.small-squares-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 800px; /* 宽度确保容纳两行布局 */
    background-color: #edfdfa;
        /* 将背景色应用到内容上 */
    padding: 50px 250px;
        /* 为内容添加内边距，以模拟原始的侧边空间 */
}

.small-squares-container :nth-child(n+6) {
    grid-column: span 1 / span 1;
}

/* 小方框样式 */
.small-square {
    width: 150px;
    height: 120px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.small-square-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #333;
    text-decoration: none;
}

.small-square-content h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.small-square-content p {
    color: #777;
    font-size: 12px;
    margin-top: 4px;
}

.small-square-content:hover {
    background-color: #f7f9fc;
    border-radius: 12px;
}
</style>